<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="js/dijit/themes/claro/claro.css">
	<style type="text/css">@import "js//dojo/resources/dojo.css";
@import "js//dijit/themes/claro/claro.css";
@import "js//dojox/grid/resources/claroGrid.css";</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script><script src='js/dojo/dojo.js'></script><script>require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale', 'dojo/domReady!'],
  function(DataGrid, ItemFileReadStore, stamp, locale){
    function formatDate(datum){
        /* Format the value in store, so as to be displayed.*/
        var d = stamp.fromISOString(datum);
        return locale.format(d, {selector: 'date', formatLength: 'long'});
    }

    var layout = [
        {name: 'Index', field: 'id'},
        {name: 'Date', field: 'date', width: 10,
            formatter: formatDate    /*Custom format, change the format in store. */
        }
    ];

    var store = new ItemFileReadStore({
        data: {
            identifier: "id",
            items: [
                {id: 1, date: '2010-01-01'},
                {id: 2, date: '2011-03-04'},
                {id: 3, date: '2011-03-08'},
                {id: 4, date: '2007-02-14'},
                {id: 5, date: '2008-12-26'}
            ]
        }
    });
    var grid = DataGrid({
        id: 'grid',
        store: store,
        structure: layout,
        autoWidth: true,
        autoHeight: true
    });
    grid.placeAt('gridContainer');
    grid.startup();
});</script>
</head>
<body class="claro">
    <div id="gridContainer" style="width: 100%; height: 200px;"></div>
</body>
</html>